<template>
    <div class="product-head">
        <h1 v-text="title"></h1>
        <span>Sort by</span>
        <UxSelect v-model="sort" :options="options" :clearable="false" @change="selectChange()" />
    </div>
</template>
<script>
import { mapGetters } from "vuex";
export default {
    name: "ListHead",
    props: {
        query: { type: Object },
    },
    data () {
        return {
            type: "",
            sort: 1,
            classify: 0,
            options: [
                {
                    value: 1,
                    label: "Best seller",
                },
                {
                    value: 2,
                    label: "Newest",
                },
                {
                    value: 3,
                    label: "Price (high-low)",
                },
                {
                    value: 4,
                    label: "Price (low-high)",
                },
            ],
        };
    },
    computed: {
        ...mapGetters("common", {
            classData: "getProductClassify",
        }),
        title: {
            get () {
                let baseStr = "All products";
                let type = this.type;
                if (type == "new") {
                    baseStr = "New arrivals";
                } else if (type == "collect") {
                    baseStr = "My favorites";
                }

                let strArr = [];
                let classData = this.classData || [];
                let classify = this.classify;
                let classifyStr = classify + "";

                let sin = Number(classifyStr[2] || 0);
                let ten = Number(classifyStr[1] || 0) * 10;
                let hun = Number(classifyStr[0] || 0) * 100;

                let hunObj = null;
                let tenObj = null;
                let sinObj = null;

                if (hun) {
                    let code = hun;
                    classData.map((item) => {
                        let classify_id = Number(item.classify_id) || 0;
                        if (code == classify_id) {
                            hunObj = item;
                            strArr.push(item.name || "");
                        }
                    });
                }
                if (ten && hunObj) {
                    let list = hunObj.child || [];
                    let code = hun + ten;
                    list.map((item) => {
                        let classify_id = Number(item.classify_id) || 0;
                        if (code == classify_id) {
                            tenObj = item;
                            strArr.push(item.name || "");
                        }
                    });
                }
                if (sin && tenObj) {
                    let list = tenObj.child || [];
                    let code = hun + ten;
                    list.map((item) => {
                        let classify_id = Number(item.classify_id) || 0;
                        if (code == classify_id) {
                            sinObj = item;
                            strArr.push(item.name || "");
                        }
                    });
                }
                return strArr.join(" / ") || baseStr;
            },
        },
    },
    watch: {
        "query.type": {
            handler: function (v) {
                if (this.query.type != this.type) {
                    this.type = this.query.type;
                }
            },
            immediate: true,
        },
        "query.sort": {
            handler: function (v) {
                if (this.query.sort != this.sort) {
                    this.sort = this.query.sort;
                }
            },
            immediate: true,
        },
        "query.classify": {
            handler: function (v) {
                if (this.query.classify || "" != this.classify) {
                    this.classify = this.query.classify;
                }
            },
            immediate: true,
        },
    },
    methods: {
        selectChange () {
            if (this.query.sort != this.sort) {
                this.$emit("queryChange", { sort: this.sort });
            }
        },
    },
    created () { },
};
</script>
<style lang="scss" scoped>
.product-head {
    min-height: 36px;
    background: #ffffff;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    position: relative;
    & > h1 {
        flex: 1;
        font-size: 32px;
        font-family: Roboto-Medium, Roboto;
        font-weight: 500;
        color: #030303;
        line-height: 36px;
    }

    & > span {
        font-size: 14px;
        font-family: Roboto-Regular, Roboto;
        font-weight: 400;
        color: #000000;
        line-height: 16px;
        margin-right: 8px;
    }
    & > .form-select {
        height: 32px;
        width: 200px;
    }
    // &::after {
    //   display: block;
    //   content: "";
    //   width: calc(100vw - 6px);
    //   height: 1px;
    //   background: #f2f2f2;
    //   position: absolute;
    //   bottom: 0;
    //   left: 50%;
    //   transform: translate(-50%);
    // }
}

@media (max-width: 960px) {
    .product-head {
        padding-top: 28px;
        flex-direction: column;
        & > h1 {
            font-size: 24px;
            color: #030303;
            line-height: 28px;
            height: 28px;
        }

        & > span {
            display: none;
        }

        .form-select {
            margin-top: 14px;
            width: 100% !important;
            height: 40px;
        }
    }
}
</style>
